<script lang="ts" setup>
import { useAppStore } from '@/store';

// 安全头部间距
const safeTop = computed(() => useAppStore().safeArea.top)

// 定义TabBar页面 注意此处页面的顺序不要乱，与TabBar实际显示顺序一致
const tabPages = [
  'pages/index/index',
  'pages/my/my',
]

const page = ref(getCurrentPages()[0].route as string)
const activeIndex = ref(tabPages.indexOf(page.value as string))

// true 表示显示tabbar
const isShowTabBar = computed(() => {
  const ps = getCurrentPages()
  return tabPages.includes(ps[ps.length - 1].route as string)
})

function changeTab(_: any, index: number | string) {
  uni.switchTab({
    url: `/${tabPages[index as number]}`,
  })
}

onShow(async () => {
  activeIndex.value = tabPages.indexOf(page.value)
})
</script>

<template>
  <nut-config-provider :style="{'--safe-area-top':`${safeTop}px`}">
    <slot />
    <!-- H5自定义，APP使用原生pages.config.ts配置 -->
    <!-- #ifdef MP -->
    <nut-tabbar v-if="isShowTabBar" v-model="activeIndex" active-color="var(--main-color)"
      unactive-color="var(--text-color)" safe-area-inset-bottom bottom placeholder @tab-switch="changeTab">
      <nut-tabbar-item tab-title="首页" @click="changeTab">
        <template #icon="props">
          <img class="size-40rpx"
            :src="props.active ? '/static/imgs/tab_index_ac.png' : '/static/imgs/tab_index.png'" />
        </template>
      </nut-tabbar-item>
      <nut-tabbar-item tab-title="我的" @click="changeTab">
        <template #icon="props">
          <img class="size-40rpx" :src="props.active ? '/static/imgs/tab_my_ac.png' : '/static/imgs/tab_my.png'" />
        </template>
      </nut-tabbar-item>
    </nut-tabbar>
    <!-- #endif -->
  </nut-config-provider>
</template>

<style lang="scss">
::v-deep .uni-tabbar-border {
  background: none !important;
  height: 0 !important;
}
</style>
